<template>
  <div>
    <el-card class="box-card" style="margin:16px;padding-bottom: 14px;">
      <span class="tow-title">视频数据概览</span>
      <!-- 第一部分 -->
      <el-row :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <el-card class="box-card auto-video-1">
            <span class="auto-video-title" style="color: #0C7FF2;">自助会议回放视频数</span>
            <!-- <i
              style="margin-left:5px;color: #7E8790;" class="el-icon-info"></i> -->
            <br>
            <div style="margin-top:20px">
              <span class="auto-video-1-num">{{ overviewData.support ? overviewData.support : 0 }}</span>
              <span class="auto-video-1-num" style="font-size:18px;margin-left:4px">个</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card auto-video-2">
            <span class="auto-video-title" style="color: #5BBB2F;">自助上传视频数量</span>
            <!-- <i
              style="margin-left:5px;color: #7E8790;" class="el-icon-info"></i> -->
            <br>
            <div style="margin-top:20px">
              <span class="auto-video-1-num">{{ overviewData.self ? overviewData.self : 0 }}</span>
              <span class="auto-video-1-num" style="font-size:18px;margin-left:4px">个</span>
            </div>

          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card auto-video-3">
            <span class="auto-video-title" style="color: #F0AD00;">视频用户数量</span>
            <!-- <i style="margin-left:5px;color: #7E8790;"
              class="el-icon-info"></i> -->
            <br>
            <div style="margin-top:20px">
              <span class="auto-video-1-num">{{ overviewData.person ? overviewData.person : 0 }}</span>
              <span class="auto-video-1-num" style="font-size:18px;margin-left:4px">人</span>
              <span class="small-font-style" style="margin-left:15px">{{ overviewData.specialPerson }}</span>
              <span class="small-font-style">人可获取信息</span>
            </div>

          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card auto-video-4">
            <span class="auto-video-title" style="color: #FF9270;">近30日视频总播放量</span>
            <!-- <i
              style="margin-left:5px;color: #7E8790;" class="el-icon-info"></i> -->
            <br>
            <div style="margin-top:20px">
              <span class="auto-video-1-num">{{ overviewData.click ? overviewData.click : 0 }}</span>
              <span class="auto-video-1-num" style="font-size:18px;margin-left:4px">次</span>
            </div>

          </el-card>
        </el-col>
      </el-row>
      <!-- 第二部分 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="12">
          <el-card class="box-card">
            <span class="tow-title">用户应用领域偏好占比TOP5</span>
            <div style="margin-top:30px" v-for="(item, index) in applyAreaList" v-if="index < 5" :key="item.count + '应用'">
              <el-row>
                <el-col :span="6" style="text-align: right;"><span
                    style="font-weight:bold;margin-right: 20px;">{{ item.name }}</span></el-col>
                <el-col :span="18"><el-progress :percentage="dualPercentage(item.percentage)"></el-progress></el-col>
              </el-row>
            </div>

          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <span class="tow-title">用户仪器原理偏好占比TOP5</span>
            <div style="margin-top:30px" v-for="(item, index) in insPrincipleList" v-if="index < 5" :key="item.name + '仪器'">
              <el-row>
                <el-col :span="6" style="text-align: right;"><span
                    style="font-weight:bold;margin-right: 20px;">{{ item.name }}</span></el-col>
                <el-col :span="18"><el-progress :percentage="dualPercentage(item.percentage)"></el-progress></el-col>
              </el-row>
            </div>

          </el-card>
        </el-col>
      </el-row>

    </el-card>

    <!-- 第三部分 -->
    <div style="margin-top:16px;margin-left:6px;margin-bottom:10px">
      <div style="width: 1200px;float:left;height: 447px;">
        <el-card class="box-card" style="margin-left:10px;margin-right:10px;">
          <span class="tow-title" style="margin-top:20px;margin-bottom:20px">视频播放TOP榜</span>
          <el-table :data="tableData" style="width: 100%;margin-top: 20px;" :row-style="{ height: '60px' }">
            <el-table-column prop="date" label="排名" width="188" type="index" :index="indexMethod" align="center">
            </el-table-column>
            <el-table-column prop="title" label="视频名称" width="710">
            </el-table-column>
            <el-table-column prop="click" label="播放量" width="239">
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
    <div style="width: 466px;float:left;height: 447px;">
      <el-card class="box-card" style="margin-left:10px;margin-right:10px;height: 428px;">
        <span class="tow-title" style="margin-top:20px;margin-bottom:20px">全部视频行业占比</span>
        <div id="videoBreakTopChartRef" style="width: 100%;height:300%;margin-top:50px" />
      </el-card>
    </div>
  </div>
</template>

<script>
import api from '@/api'
var echarts = require('echarts')
export default {
  data() {
    return {
      overviewData: {
        person: 0,
        self: 0,
        support: 0,
        click: 0,
        specialPerson: 0
      },
      applyAreaList: [],
      insPrincipleList: [],
      tableData: [],
      shanxingLoading: true,
      videoBreakTopChart: null,
      StyleDistributionList: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'vertical',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'bottom',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'bottom',
          // itemWidth: 24,   // 设置图例图形的宽
          // itemHeight: 18,  // 设置图例图形的高
          // textStyle: {
          //   color: '#666'  // 图例文字颜色
          // },
          // show:false
        },
        series: [
          {
            name: '全部视频行业占比',
            type: 'pie',
            radius: ['50%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: []
          }
        ]
      },
    };
  },
  created() {
    this.getVideoListData()
    this.getApplyAreaList(1)
    this.getApplyAreaList(2)
    this.getVideoTop()
  },
  mounted() {
    this.initEChartData()
  },
  methods: {
    async getApplyAreaList(type) {
      const obj = {
        type: type
      }
      const list = await api.video.selectVideoList(obj)
      if (type == 1) {
        this.applyAreaList = list.data
      } else {
        this.insPrincipleList = list.data
      }
    },
    async getVideoListData() {
      const list = await api.video.selectVideoData()
      this.overviewData = list.data
      this.overviewData.specialPerson = 0
    },
    async getVideoTop() {
      const list = await api.video.selectVideoTop()
      this.tableData = list.data
    },
    format(percentage) {
      return percentage;
    },
    indexMethod(index) {
      return index + 1;
    },
    async initEChartData() {
      const obj = {
        type: 1
      }
      const list = await api.video.selectVideoList(obj)
      for (var i = 0; i < list.data.length; i++) {
        let modelItem = {};
        modelItem["name"] = list.data[i].name;
        modelItem["value"] = this.dualPercentage(list.data[i].percentage);
        this.StyleDistributionList.series[0].data[i] = modelItem;
      }
      var videoBreakTop = document.getElementById('videoBreakTopChartRef')
      this.videoBreakTopChart = echarts.init(videoBreakTop)
      this.videoBreakTopChart.setOption(this.StyleDistributionList)
    },
    dualPercentage(val) {
      return Number(parseFloat(val.substring(0, val.indexOf('%'))).toFixed(1))
    }

  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none !important;
}

.auto-video-1 {
  width: 382px;
  height: 120px;
  background: linear-gradient(180deg, #dcedff 0%, #f3f8ff 100%);
  border-radius: 6px 6px 0px 0px;
  opacity: 1;
}

.auto-video-2 {
  width: 382px;
  height: 120px;
  background: linear-gradient(180deg, #ecf8e7 0%, #f7faf6 100%);
  border-radius: 6px 6px 0px 0px;
  opacity: 1;
}

.auto-video-3 {
  width: 382px;
  height: 120px;
  background: linear-gradient(180deg, #fff6dd 0%, #fffdf7 100%);
  border-radius: 6px 6px 0px 0px;
  opacity: 1;
}

.auto-video-4 {
  width: 382px;
  height: 120px;
  background: linear-gradient(180deg, #ffeae3 0%, #fffdf7 100%);
  border-radius: 6px 6px 0px 0px;
  opacity: 1;
}

.auto-video-title {
  width: 126px;
  height: 20px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  line-height: 16px;
  -webkit-background-clip: text;
}

.auto-video-1-num {
  width: 29px;
  height: 34px;
  font-size: 24px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #202933;
  line-height: 28px;
  -webkit-background-clip: text;
}

.tan-hao {
  width: 12px;
  height: 12px;
  background: #333333;
  opacity: 1;
  border: 2px solid #333333;
}

.tow-title {
  width: 203px;
  height: 22px;
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #202933;
  line-height: 19px;
  -webkit-background-clip: text;
}

.small-font-style {
  width: 95px;
  height: 17px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #7e8790;
  line-height: 14px;
  -webkit-background-clip: text;
}
</style>